<site-layout>
  <@title>Layouts</@title>
  <@content>
    <section>
      <h2>Layouts</h2>
      <p>
        If you hadn't noticed, this site has the same header on every page.  This is provided by the
        <code>&lt;site-layout></code>
        component which lives in
        <code>~/src/components/site-layout</code>.  This component makes use of Marko's ability to
        <a href="http://markojs.com/docs/core-tags/#layouts-with-nested-attributes">
          pass content using nested attributes
        </a>.
      </p>
      <p/>
    </section>
    <section>
      <h2>Styles</h2>
      <p>
        As you can see, this site looks quite nice.  That's because Marko
        <a href="http://markojs.com/docs/components/#supporting-files">
          pulls in stylesheets
        </a>
        next to a Marko template.  Try editing the contents of
        <code>~/src/components/site-layout/style.css</code>. &#128132;
      </p>
    </section>
    <section>
      <h2>Images</h2>
      <p>
        We also have the Marko logo in the header.  The image file lives at
        <code>site-layout/logo.png</code>, right next to
        <code>site-layout/index.marko</code>
        which references it using a relative path:
        <code>&lt;img src="./logo.png"/></code>.
      </p>
      <p>
        And this works for all resources, not just images, which allows you to keep your resources next to the templates which use them. &#128077;
      </p>
    </section>
  </@content>
</site-layout>
